import React, { Suspense } from 'react';
import { IonApp, IonRouterOutlet, IonSplitPane, IonMenu, IonContent, IonList, IonListHeader, IonMenuToggle, IonItem, IonIcon, IonLabel, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route, Redirect } from 'react-router-dom';
import { settings, cubeOutline } from 'ionicons/icons';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

/* i18n */
import './i18n/i18n';
import { useTranslation } from 'react-i18next';
import LanguageSelector from './components/common/LanguageSelector';

/* Pages */
import { ModelsPage } from './pages/terminal/ModelsPage';

setupIonicReact({
  mode: 'ios',
});

const AppContent: React.FC = () => {
  const { t } = useTranslation();

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <IonMenu contentId="main">
            <IonContent>
              <IonList>
                <IonListHeader>Ollama UI</IonListHeader>
                <IonMenuToggle autoHide={false}>
                  <IonItem routerLink="/models" routerDirection="none" lines="none" detail={false}>
                    <IonIcon slot="start" icon={cubeOutline} />
                    <IonLabel>{t('models.title')}</IonLabel>
                  </IonItem>
                </IonMenuToggle>
                <IonItem lines="none">
                  <IonIcon slot="start" icon={settings} />
                  <LanguageSelector />
                </IonItem>
              </IonList>
            </IonContent>
          </IonMenu>

          <IonRouterOutlet id="main">
            <Route path="/models" exact={true}>
              <ModelsPage />
            </Route>
            <Route path="/" exact={true}>
              <Redirect to="/models" />
            </Route>
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

const App: React.FC = () => {
  return (
    <Suspense fallback="Loading...">
      <AppContent />
    </Suspense>
  );
};

export default App;
